<template>
  <div class="SongTab">
    <!--  歌曲tab切换-->
    <van-tabs title-active-color="red">
      <van-tab title="热歌榜">

        <ul>
          <li v-for="(item,index) in list" :key="index">
            <div class="img">

              <img :src="item.pic_huge" alt="">
            </div>
            <div class="imgText">
              <p class="songName">{{item.title}}</p>
              <p class="author">{{item.artist_name}}</p>
            </div>
          </li>
        </ul>
      </van-tab>

      <van-tab title="新歌榜">
        <ul>
          <li v-for="(item,index) in list" :key="index">
            <div class="img">
              <img :src="item.pic_huge" alt="">
            </div>
            <div class="imgText">
              <p class="songName">{{item.title}}</p>
              <p class="author">{{item.artist_name}}</p>
            </div>
          </li>
        </ul>
      </van-tab>

      <van-tab title="King榜">
        <ul>
          <li v-for="(item,index) in list" :key="index">
            <div class="img">
              <img :src="item.pic_huge" alt="">
            </div>
            <div class="imgText">
              <p class="songName">{{item.title}}</p>
              <p class="author">{{item.artist_name}}</p>
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>




    <!-- 事件 -->
  </div>
</template>

<script>
  // import axios from "axios"
  import {
    getSongList
  } from "@/api/api";

  export default {
    name: "TabSong",
    props: ["type", "size"],
    data() {
      return {
        list: []
      }
    },
    created() {
      // axios.get(`/api/v1/restserver/ting?method=baidu.ting.billboard.billList&type=${this.type}&size=${this.size}`).then(res => {
      //   this.list = res.data.song_list;
      //   // console.log(this.list)
      //   // console.log(res)
      // })


      getSongList(this.type, this.size).then(res => {
        this.list = res.song_list;
        // console.log(this.list);
      })
    }
  }
</script>

<style scoped lang="less">
  .img {
    width: 80px;
    height: 80px;
    padding: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  li {
    display: flex;
  }

  .SongTab {
    background-color: #f9f9f9;
  }

  .songName {
    font-size: 15px;
    font-weight: 500;
  }

  .author {
    font-size: 14px;
    color: #aaa;
  }
</style>